<template>
	<div class="math-formula-item">
		<div class="formula-item" v-for="(item, index) in list" :key="index">
			<div class="open-close-list">
				<div>
					<div class="placeholder">
						<span>{{ item.merge ? item.input : item.formula[item.formula.length - 1] }}</span>
					</div>
				</div>
				<div>
					<div class="placeholder">
						<span>{{ item.formula[0] === null ? item.input : item.formula[0]}}</span>
					</div>
					<div class="placeholder">
						<span>{{ item.formula[2] === null ? item.input : item.formula[2]}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	},
})
const list = computed(() => {
	return props.data
})
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.math-formula-item {
	display: flex;
	flex-wrap: wrap;
	.formula-item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem 0;
	}
	
	.open-close-list {
		> div {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.placeholder {
			text-align: center;
			border: 2px solid $gray-ligh-4;
			border-radius: 0.4rem;
			box-sizing: border-box;
			font-size: 1.2rem;
			font-family: "Alimama";
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 0.5;
			overflow: hidden;
			background-color: #fff;
			margin: 0 1.2rem;
			height: 2.5rem;
			width: 2.5rem;
			span {
				transform: translateY(-0.45rem);
			}
		}
		>div:first-child {
			&::before, &::after {
				content: "";
				position: absolute;
				left: 50%;
				border-left: 2px solid #ccc;
				top: 130%;
				bottom: -3.2rem;
			}
			&::before {
				transform: rotate(45deg) translateX(-1.2rem);
			}
			&::after {
				transform: rotate(-45deg) translateX(1.2rem);
			}
			margin-top: 2.4rem
		}
		>div:last-child {
			margin-top: 2.4rem
		}
	}
}
</style>